<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>分析生命周期</title>
</head>
<body>
    <div id="app">
        <h1>{{title}}，{{n}}</h1>
        <button @click="n++">点我加1</button>
        <button @click="buy">点击销毁DOM</button>
    </div>
    <script>
        Vue.config.productionTip = false // 关闭开发模式警告

        const vm = new Vue({
            // template:`
            //     <div>
            //         <h1>{{title}}</h1>
            //         <button>点击</button>
            //     </div>
            // `,
            data(){
                return {
                    title:'Vue2生命周期',
                    n:1,
                }
            },
            methods: {
                buy(){
                    console.log('buy')
                    this.$destroy()
                }
            },
            beforeCreate() {
                /*
                    此时数据代理还没开始 ，无法通过vm访问data中的数据、methods中的方法
                */
               console.log('------------------------beforeCreate---------------------');
                console.log(this.title,this);
            },
            created() {
                /*
                    数据检测和数据代理创建完毕 
                    此时可以通过vm访问data中的数据和methods中的方法
                */
                console.log('------------------------created---------------------');
                console.log(this.title,this);
            },
            beforeMount() {
                // 不要在这里操作DOM，即使操作了最终也无效
                console.log('------------------------beforeMount---------------------');
                console.log(this.title,this);
            },
            mounted() {
                /*Vue完成模板的解析，并把【初始的】真实DOM元素放入页面后（挂载完毕）调用mounted钩子函数，只调用一次
                */
               console.log('------------------------mounted---------------------');
               console.log(this.title,this);
            },
            beforeUpdate() {
                // 此时页面和数据尚未保持同步，数据已经改变，但是页面依然是旧的
                console.log('------------------------beforeUpdate---------------------');
            },
            updated() {
                // 页面和数据保持同步
                console.log('------------------------updated---------------------');
            },
            beforeDestroy() {
                // 可以拿到数据，但是所有对数据的修改不会再触发操作了
                console.log('------------------------beforeDestroy---------------------');
                console.log(this.n,this);
            },
            destroyed() {
                console.log('------------------------destroyed---------------------');
            },
        }).$mount('#app')
    </script>
</body>
</html>